<import
  file="block/common.html"
  name="url"
  :tpl_cfg="['urlName'=>'内容发布统计']"
/>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <!--统计图表展示 S-->
    <div class="layui-col-md12">
      <div class="layui-col-md4">
        <div class="layui-col-md12">
          <div id="catenian" style="height:500px;"></div>
        </div>
      </div>

      <div class="layui-col-md4">
        <div class="layui-col-md12">
          <div id="cateyue" style="height:500px;"></div>
        </div>
      </div>

      <div class="layui-col-md4">
        <div class="layui-col-md12">
          <div id="meinian" style="height:500px;"></div>
        </div>
      </div>
    </div>

    <div class="layui-col-md12">
      <div class="layui-col-md6">
        <div class="layui-col-md12">
          <div id="meiyue" style="height:500px;"></div>
        </div>
      </div>

      <div class="layui-col-md6">
        <div class="layui-col-md12">
          <div id="meizhou" style="height:500px;"></div>
        </div>
      </div>
    </div>

    <!--统计图表展示 E-->
  </div>
</div>
<script src="<?php echo U_RES;?>/lib/chart/echarts.min.js"></script>
<script>
  $.getJSON("<{CAUrl('contentcount','index')}>&list_json", function (res) {
    var meiyue = echarts.init(document.getElementById('meiyue'));
    var meizhou = echarts.init(document.getElementById('meizhou'));
    var meinian = echarts.init(document.getElementById('meinian'));
    var catenian = echarts.init(document.getElementById('catenian'));
    var cateyue = echarts.init(document.getElementById('cateyue'));

    var meiyuetotal = [],
      meiyuemonths = [],
      meiyueBJtotal = [];
    $.each(res.data.meiyue, function (i, arr) {
      meiyuemonths.push(arr["months"]);
      meiyuetotal.push(arr["total"]);
      meiyueBJtotal.push(arr["totalBJ"]);
    });

    meiyue.setOption({
      title: {
        text: '今年每月信息量统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        data: meiyuemonths
      },
      yAxis: {},
      series: [
        {
          name: '未审',
          type: 'bar',
          data: meiyuetotal,
          itemStyle:{  
            normal:{  
              color:'#d17843',
            }  
          },  
        },{
          name: '已审',
          type: 'bar',
          data: meiyueBJtotal
        }
      ]
    });

   
    var meizhoutotal = [],
      meizhouweeks = [],
      meizhouBJtotal = [];
    $.each(res.data.meizhou, function (i, arr) {
      meizhouweeks.push(arr["weeks"]);
      meizhoutotal.push(arr["total"]);
      meizhouBJtotal.push(arr["totalBJ"]);
    });

    meizhou.setOption({
      title: {
        text: '今年每周信息量统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        data: meizhouweeks
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '未审',
          type: 'bar',
          data: meizhoutotal,
          itemStyle:{  
            normal:{  
              color:'#f5b031',
            }  
          },  
        },{
          name: '已审',
          type: 'bar',
          data: meizhouBJtotal
        }
      ]
    });


    var meiniantotal = [],
      meinianyears = [],
      meinianBJtotal = [];
    $.each(res.data.meinian, function (i, arr) {
      meinianyears.push(arr["years"]);
      meiniantotal.push(arr["total"]);
      meinianBJtotal.push(arr["totalBJ"]);
    });


    meinian.setOption({
      title: {
        text: '年信息量统计'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        data: meinianyears
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '未审',
          type: 'bar',
          data: meiniantotal,
        },{
          name: '已审',
          type: 'bar',
          data: meinianBJtotal,
        }
      ]
    });

    var niancolor = [];
    $.each(res.data.catenian, function (i, arr) {
      niancolor.push(arr["color"]);
    });

    catenian.setOption({
      title: {
        text: '本年栏目类型分析统计'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      color:niancolor,  
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 4,
            borderColor: '#fff',
            borderWidth: 1
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: res.data.catenian
        }
      ]
    });


    var yuecolor = [];
    $.each(res.data.cateyue, function (i, arr) {
      yuecolor.push(arr["color"]);
    });

    cateyue.setOption({
      title: {
        text: '本月栏目类型分析统计',
        subtext: '每个栏目发布量',
        left: 'center'
      },
      color:yuecolor,  
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '60%',
          data: res.data.cateyue,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });

  });
</script>
